<template>
    <div>
        <Card class="search-card">
            <Form ref="searchForm"  :model="searchForm" :rules="formRules"  :label-width="100"  >
                <Form-item label="医院全称" prop="name">
                    <Input  type="text" v-model="searchForm.name" :maxlength="64"/>
                </Form-item>
                <Form-item label="医院简称" prop="short_name" >
                    <Input  type="text" v-model="searchForm.short_name" :maxlength="12"/>
                </Form-item>
                <FormItem prop="password" class="search-button">
                    <Button type="primary" @click="handleSearch('searchForm')">搜索</Button>
                    <Button type="error" @click="handleReset('searchForm')">重置</Button>
                </FormItem>
            </Form >
        </Card>

        <div class="submit-button">
            <Button type="primary" @click="openModal(false)">新增</Button>
        </div>

        <Table :columns="columns" :data="tableData" border>
            <template slot-scope="{ row }" slot="action">
                <div class="action-button">
                    <Button  type="primary" @click="openModal(true,row)" size="small">编辑</Button>
                    <Button  type="error" @click="handleCancel(row,index)"  size="small">删除</Button>
                </div>
            </template>
        </Table>

        <Page :total="pageInfo.total" :current="pageInfo.pageNo" @on-change="changePage" />
        <Modal
                @on-visible-change="modelStatusChange"
                v-model="addModal"
                :title="isEdit?'修改':'新增'">
            <Form ref="formCustoms"  :model="formCustom" :rules="formRules"  :label-width="100"  >
                <Form-item label="医院全称" prop="name">
                    <Input  type="text" v-model="formCustom.name" :maxlength="64"/>
                </Form-item>
                <Form-item label="医院简称" prop="short_name" >
                    <Input  type="text" v-model="formCustom.short_name" :maxlength="12"/>
                </Form-item>
                <Form-item label="医院类型" prop="type">
                    <Select v-model="formCustom.type" >
                        <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Form-item>
                <Form-item label="排序" prop="sort">
                    <Input type="number" number  v-model="formCustom.sort" />
                </Form-item>
                <Form-item label="编制床位"  prop="bed_num">
                    <Input type="number" number v-model="formCustom.bed_num" />
                </Form-item>
                <Form-item label="实有床位数" prop="bed_num_real" >
                    <Input type="number" number v-model="formCustom.bed_num_real" />
                </Form-item>
                <Form-item label="执业医师数" prop="doctor_num" >
                    <Input type="number" number v-model="formCustom.doctor_num" />
                </Form-item>
                <Form-item label="注册护士数" prop="nurse_num" >
                    <Input type="number" number v-model="formCustom.nurse_num" />
                </Form-item>
            </Form >
            <div slot="footer">
                <Button  >取消</Button>
                <Button v-if="isEdit"  type="primary" @click="handleSave()">保存</Button>
                <Button  v-else type="primary" @click="handleAdd('formCustoms')">添加</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { insert, findPageList, update } from '@/api/outbreak-management/healing-power/designated-hospital-management'
// 定点医院
export default {
  data () {
    const validateInteger = (rule, value, callback) => {
      if (value % 1 !== 0) {
        callback(new Error('只能输入整数'))
      } else {
        callback()
      }
    }
    return {
      // 搜索
      searchForm: {
        name: '',
        short_name: ''
      },
      formRules: {
        name: [
          { required: true, message: '医院全称必填', trigger: 'blur' },
          { max: 64, message: '医院全称不能超过64位', trigger: 'blur' }
        ],
        short_name: [
          { required: true, message: '医院简称必填', trigger: 'blur' },
          { max: 12, message: '医院全称不能超过64位', trigger: 'blur' }
        ],
        type: [
          { required: true, type: 'number', message: '医院类型必选', trigger: 'change' }
        ],
        sort: [
          { required: true, type: 'number', message: '排序必填', trigger: 'blur' },
          { type: 'number', min: 0, max: 9999, message: '排序范围不可超过0-9999', trigger: 'blur' },
          { validator: validateInteger, trigger: 'blur' }
        ],
        bed_num: [
          { required: true, type: 'number', message: '编制床位数必填', trigger: 'blur' },
          { type: 'number', min: 0, max: 9999, message: '编制床位数不可超过0-9999', trigger: 'blur' },
          { validator: validateInteger, trigger: 'blur' }
        ],
        bed_num_real: [
          { required: true, type: 'number', message: '实有床位数必填', trigger: 'blur' },
          { type: 'number', min: 0, max: 9999, message: '实有床位数范围不可超过0-9999', trigger: 'blur' },
          { validator: validateInteger, trigger: 'blur' }
        ],
        doctor_num: [
          { required: true, type: 'number', message: '执业医师数必填', trigger: 'blur' },
          { type: 'number', min: 0, max: 9999, message: '执业医师数范围不可超过0-9999', trigger: 'blur' },
          { validator: validateInteger, trigger: 'blur' }
        ],
        nurse_num: [
          { required: true, type: 'number', message: '注册护士数必填', trigger: 'blur' },
          { type: 'number', min: 0, max: 9999, message: '注册护士数范围不可超过0-9999', trigger: 'blur' },
          { validator: validateInteger, trigger: 'blur' }
        ]
      },
      // 医院类型
      typeList: [
        {
          value: 0,
          label: '市级重点医院'
        },
        {
          value: 1,
          label: '三级甲'
        }, {
          value: 2,
          label: '省级重点医院'
        }, {
          value: 3,
          label: '两中心'
        } ],
      // 表单
      formCustom: {
        name: '沈阳市第四人民医院',
        short_name: '沈阳四院',
        type: 0,
        sort: 999,
        bed_num: 123,
        bed_num_real: 456,
        doctor_num: 789,
        nurse_num: 1234
      },
      // 表格列
      columns: [
        {
          title: '医院全称',
          key: 'name'
        },
        {
          title: '医院简称',
          key: 'short_name'
        },
        {
          title: '医院类型',
          key: 'type'
        },
        {
          title: '编制床位',
          key: 'bed_num'
        },
        {
          title: '实有床位数',
          key: 'bed_num_real'
        },
        {
          title: '执业医师数',
          key: 'doctor_num'
        },
        {
          title: '注册护士数',
          key: 'nurse_num'
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          width: 120
        }
      ],
      // 表格数据
      tableData: [],
      // 弹窗控制
      addModal: false,
      // 编辑
      isEdit: false, // 当前聚焦的输入框的行数
      pageInfo: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  created () {},
  mounted () {
    this.handleSearch()
  },
  destroyed () {},
  methods: {
    // 监听弹窗关闭事件
    modelStatusChange (status) {
      if (!status) {
        this.formCustom = { name,
          short_name: '',
          type: 0,
          sort: 0,
          bed_num: 0,
          bed_num_real: 0,
          doctor_num: 0,
          nurse_num: 0 }
      }
    },
    // 打开弹窗
    openModal (isEdit, row) {
      this.isEdit = isEdit
      if (isEdit) {
        let { id, name, short_name, type, sort, bed_num, bed_num_real, doctor_num, nurse_num } = row
        this.formCustom = { name,
          id,
          short_name,
          type: parseInt(type),
          sort,
          bed_num,
          bed_num_real,
          doctor_num,
          nurse_num }
      }
      this.addModal = true
    },
    // 分页查询查找
    handleSearch () {
      findPageList(this.pageInfo).then(({ data }) => {
        let { errcode, data: res } = data
        if (errcode === 0) {
          this.tableData = res.results
          this.pageInfo.total = res.totalRecord
        }
      })
    },
    // 新增
    handleAdd (name) {
      console.log(this.$refs[name])
      this.$refs[name].validate((valid) => {
        console.log(valid)
        if (valid) {
          insert(this.formCustom).then(({ data }) => {
            let { errcode } = data
            if (errcode === 0) {
              this.handleSearch()
              this.addModal = false
            } else {
              this.$Message.warning('操作失败!')
            }
          })
        } else {
          this.$Message.error('数据校验失败,请检查后再试!')
        }
      })
    },
    // 重置
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    // 保存
    handleSave (index) {
    },
    // 取消
    handleCancel () {},
    // 修改
    handleEdit (row, index) {
      update()
      console.log(row)
      console.log(index)
    },
    // 分页
    changePage (pageNo) {
      this.pageInfo.pageNo = pageNo
      this.handleSearch()
    }
  }

}
</script>

<style scoped lang="less">
</style>
